<template>
  <div class="data-show">
    <div class="show-header">
      <img src="@/assets/img/clerkbg.jpg" alt="" class="show-bg">
    </div>
    <div class="change-bg-wrapper">
      <button class="change-bg" @click="showBg = true">更换背景</button>

      <van-action-sheet
        v-model="showBg"
        @select="selectBg"
        :actions="bgs"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
      />
    </div>
    <div class="show-data">
      <div class="data-headImg-text">修改头像</div>
      <div class="data-headImg-wrapper">
        <img src="@/assets/img/head.jpg" alt="" class="data-headImg">
        <van-tag round type="primary" class="data-grade">
          <span class="icon  iconfont icon-bianji" style="font-size: .2rem"></span>
        </van-tag>
      </div>
    </div>
    <div class="data-info">
      <div class="data-headline">个人资料</div>
      <div class="data-main">
        <div class="clerk-nickname">
          <van-field v-model="value" label="昵称:" placeholder="请输入昵称" input-align="right"/>
        </div>
        <div class="clerk-date">
          <van-cell
            title="生日:"
            is-link
            :value="timeValue"
            @click="showPopup" />
          <van-popup v-model="show" position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              :loading="isLoadingShow"
              :min-date="minDate"
              :max-date="maxDate"
              :formatter="formatter"
              @cancel="show = false"
              @confirm="confirmPicker"
            />
          </van-popup>
        </div>
        <div class="clerk-area">
          <van-field readonly  clickable label="地区:" :value="valueArea" placeholder="请选择所在地区" @click="bindShow" input-align="right"/>

          <!--选择省市区-->
          <van-popup v-model="showArea" position="bottom" :style="{ height: '40%' }">
            <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="bindCancel" />
          </van-popup>

        </div>
        <div class="clerk-tag-add">
          <label for="" class="clerk-tag-label">标签:</label>
          <van-tag type="success" class="icon iconfont icon-jia" @click="showTag = true">添加</van-tag>
        </div>

        <van-action-sheet v-model="showTag" title="选择标签" close-icon >
          <div class="content">
              <div class="tag-list-wrapper">
                   <div class="tag-list" v-for="(item, index) in actions" :class="{select: item.selected}" @click="changeTag(item)" :key="index">
                      {{item.name}}
                   </div>
              </div>
              <div class="tag-sure-wrapper">
                <button @click="tag_sure" class="tag-sure">确定</button>
              </div>
          </div>
        </van-action-sheet>

      <div class="clerk-tab">
          <van-tag
            v-if="shows.primary0"
            closeable
            size="medium"
            type="primary0"
            @close="close0('primary0')"
          >
            {{this.selectedItem[0]}}
          </van-tag>
        <van-tag
          v-if="shows.primary1"
          closeable
          size="medium"
          type="primary1"
          @close="close1('primary1')"
        >
          {{this.selectedItem[1]}}
        </van-tag>
        </div>
       <div class="clerk-signature">
         <div class="signature-headline">个人签名</div>
         <div class="signature-info-wrapper">
            <textarea v-model="signature"  placeholder="请输入个性签名" class="signature-info"></textarea>
         </div>
       </div>
      </div>
    </div>



    <div class="order-go-wrapper">
       <button class="order-go">确认保存</button>
    </div>



  </div>
</template>

<script>
  import Vue from 'vue';
  import { Field, DatetimePicker, Popup, Cell, Area, Tag, ActionSheet,Toast} from 'vant';
  import AeraInfo from "../../../common/area.js";

  Vue.use(Field);
  Vue.use(DatetimePicker);
  Vue.use(Popup);
  Vue.use(Cell);
  Vue.use(Area);
  Vue.use(Tag);

  Vue.use(ActionSheet);
  export default {
    name: "ClerkDataEdit",
    data: function () {
      return{
        value: '',
        timeValue: '',
        show: false,
        showTag1:false,
        isLoadingShow: true,
        currentDate: new Date(),
        minDate: new Date(1900, 1, 1),
        maxDate: new Date(),
        areaList: AeraInfo, //引用地区信息
        showArea: false,
        valueArea: '', //地区值
        arrArea: [], //存放地区数组
        showTag: false,
        selectedItem: [],
        signature:'',
        showBg: false,
        bgs: [{ name: '更改相册背景' }],
        actions: [
          { name: '私人电台',selected: false },
          { name: '情感陪聊',selected: false },
          { name: '温柔可爱',selected: false },
          { name: '二次元',selected: false },
          { name: '话痨',selected: false },
          { name: '逗',selected: false },
          { name: '暖',selected: false }
          ],
        shows: {
          primary0: false,
          primary1: false,
        },
      }
    },
    methods: {
      showPopup() {
        this.show = true
        this.isLoadingShow = true
        setTimeout(() => {
          this.isLoadingShow = false
        }, 500)
      },
      // 确认选择之后的时间
      confirmPicker (val) {
        let year = val.getFullYear()
        let month = val.getMonth() + 1
        let day = val.getDate()
        // let hour = val.getHours()
        // let minute = val.getMinutes()
        // // let second = val.getSeconds()
        if (month >= 1 && month <= 9) { month = `0${month}` }
        if (day >= 1 && day <= 9) { day = `0${day}` }
        // if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
        // if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
        // // if (second >= 0 && second <= 9) { second = `0${second}` }
        // this.timeValue = `${year}-${month}-${day} ${hour}:${minute}:00`
        this.timeValue = `${year}-${month}-${day}`
        console.log(this.timeValue)

        this.show = false
      },
      // 日期选项格式化函数
      formatter (type, value) {
        if (type === 'year') {
          return `${value}年`
        } else if (type === 'month') {
          return `${value}月`
        } else if (type === 'day') {
          return `${value}日`
        }
        // else if (type === 'hour') {
        //   return `${value}时`
        // } else if (type === 'minute') {
        //   return `${value}分`
        // } else if (type === 'second') {
        //   return `${value}秒`
        // }
        return value
      },
      bindShow(){
        this.showArea= true;
      },
      bindCancel(){
        this.showArea= false;
      },
      //地区选择
      onAreaConfirm(val) {
        this.showArea = false;
        this.arrArea = val;
        var addrInfo = val[0].name + '-' + val[1].name + '-' + val[2].name;
        this.valueArea = addrInfo
      },
      close0(type) {
        this.shows[type] = false;

      },
      close1(type) {
        this.shows[type] = false;

      },
      tag_sure() {
        // Toast('确认');
        this.showTag = false;
        console.log(this.selectedItem[0])
        console.log(this.selectedItem[1])
        if(this.selectedItem[0]){
          this.shows.primary0=true
        }else{
          this.shows.primary0=false
        }

        if(this.selectedItem[1]){
          this.shows.primary1=true
        }else{
          this.shows.primary1=false
        }


      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.showTag = false;
        Toast(item.name);

      },
      selectBg() {
        this.$router.push({path: '/clerkupload'});
      },
      changeTag(item) {
        console.log(item)
        if (!item.selected && this.selectedItem.length < 2) {
          item.selected = true
          this.selectedItem.push(item.name)
        } else if (item.selected) {
          item.selected = false
          const i = this.selectedItem.indexOf(item.name)
          this.selectedItem.splice(i, 1)
        }
      },
      onCancel() {
        Toast('取消');
      },
    }
  }
</script>
<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .data-show
    .show-header
      overflow hidden
      height 0
      padding-bottom 75%
      .show-bg
        width 100%
    .change-bg-wrapper
      width calc(100% - .3rem)
      padding-right .3rem
      right()
      .change-bg
        width 2rem
        border-radius .2rem
        background-color #fff
        color #333
        height .7rem
        position relative
        top -2.7rem
    .show-data
      margin 0 .2rem
      background-color #fff
      display flex
      flex-direction column
      position relative
      align-items flex-start
      justify-content space-between
      width calc(100% - 1rem)
      padding .3rem
      top -2.2rem
      height 2.3rem
      border-radius .2rem
      .data-headImg-text
        position absolute
        font-size .3rem
        color #333
        top .3rem
      .data-headImg-wrapper
        top .8rem
        position absolute
        width 1.8rem
        height 1.8rem
        z-index 1
        .data-headImg
          border-radius 50%
          width 100%
          height 100%
        .data-grade
          border-radius 50%
          position absolute
          width .5rem
          height .5rem
          top 1.2rem
          font-size .2rem
          center()
          padding 0
    .data-info
      padding .3rem 0
      margin -2rem .3rem 0 .3rem
      border-radius .2rem
      background #fff
      .data-headline
        padding 0 .3rem .2rem .3rem
        font-size .3rem
        color #333
        left()
      .data-main
        margin-bottom 1.5rem
        .clerk-tag-add
          margin-top .3rem
          padding 0 .3rem
          between-align-items()
          .clerk-tag-label
            font-size .3rem
            color #999
          .van-tag
            border-radius .2rem
            background $DefaultColor
            color $DefaultTextColor
            font-size .2rem
        .clerk-tab
          margin .3rem 0
          padding 0 .3rem
          left()
          .van-tag
            margin-right .15rem
            border-radius .2rem
            border 1px solid  $DefaultTextColor
            background-color #fff
            color $DefaultTextColor
            font-size .2rem
        .van-action-sheet
          .van-action-sheet__content
            .content
              .tag-list-wrapper
                padding .3rem
                between-align-items()
                flex-wrap wrap
                .tag-list
                  center()
                  height .8rem
                  line-height .8rem
                  width calc(100% / 3 - .2rem)
                  border-radius .2rem
                  margin-bottom .3rem
                  border 1px solid $DefaultTextColor
                  color $DefaultTextColor
                .select
                  border none
                  color #fff
                  background-color $DefaultTextColor
              .tag-sure-wrapper
                center()
                padding .3rem
                .tag-sure
                  width 100%
                  background-color $DefaultTextColor
                  color #fff
                  height .8rem
                  border-radius .2rem
        .clerk-signature
          padding 0 .3rem
          .signature-headline
            color #333
            font-size .3rem
          .signature-info-wrapper
            padding .5rem 0 .3rem 0
            .signature-info
              width calc(100% - .6rem)
              padding .3rem
              background-color #F6F6F7
              height 1.44rem
              border-radius .2rem
              resize:none
      .type-type
        around-align-items()
        padding .3rem
        .van-tag
          display flex
          height .6rem
          border-radius .1rem
          background $DefaultColor
          color $DefaultTextColor
          center()
          width 25%
      .type-item-wrapper
        around-align-items()
        padding .3rem .3rem 0 .3rem
        .type-item
          display flex
          color #333
          center()
          flex-direction column
          width 25%
          text-align center
          .item-list
            font-size .3rem
            color #333333
            padding-top .3rem
    .order-go-wrapper
      position fixed
      bottom 0
      width 100%
      background-color #fff
      center()
      border-top 1px solid #f4f4f4
      .order-go
        width calc(100% - 1.5rem)
        height .9rem
        background $DefaultColor
        color $DefaultTextColor
        border-radius .1rem
        font-size .3rem
        margin .2rem 0

</style>
<style>
  .data-show .show-data .detail-main{
    left: 1.2rem;
  }
  .chat-online:before{
    right: .9rem;
  }
  .chat-sex-qimiao-online-left .van-tag--primary{
    background: #CED1EF;
  }
  .detail-main .chat-main-tag .van-tag--primary{
    background: #CED1EF;
  }
  .data-show .item:nth-of-type(1) .user-icon{
    color:#D8D8D8;
  }
  .data-show .item:nth-of-type(1) .user-name{
    color:#D8D8D8
  }
  .data-show .data-grade{
    right:0;
  }
  .data-headImg-wrapper .van-tag--primary{
    background-color: #CED1EF;
    color: #8A8FC9;
    display: flex;
    justify-content: center;
    border-radius: .1rem;

  }
  .data-main .van-cell::after{
    border-bottom: unset;
  }
  .data-main .van-cell__title span{
    font-size: .3rem;
    color: #999;
  }
  .data-show .change-bg-wrapper{
   right: 0;
  }
</style>
